<template>
  <div>
    <NavBar :navList="navbar" @change="(index) => (current = index)"></NavBar>
    <!-- 我发起的 -->
    <view v-if="current === 0">
      <Initiate :users="userList.reverse()" />
    </view>
    <!-- 收到请求 -->
    <view v-if="current === 1">
      <Receive :users="receiveList.reverse()" @allow="handleAllow" @ignore="handleIgnore" />
    </view>
    <!-- 互换成功 -->
    <view v-if="current === 2">
      <Initiate :users="successList.reverse()" />
    </view>
  </div>
</template>

<script setup lang="ts">
import NavBar from '../../../components/NavBar.vue'
import Initiate from '../components/Initiate.vue'
import Receive from '../components/Receive.vue'
import type { User } from '@/types/Initiate'
import { ref } from 'vue'
const navbar = ref(['我发起的', '收到请求', '互换成功'])
const current = ref(0)
// 我发起的  传入的数据
const userList = ref<User[]>([
  {
    avatar: '../../../static/images/car.png',
    icon: '../../../static/message/女.png',
    name: '白天睡不醒',
    age: 26,
    height: 180,
    location: '成都郫都区',
    time: '16小时前',
  },
  {
    avatar: '../../../static/images/car.png',
    icon: '../../../static/message/男.png',
    name: '雨樱花',
    age: 25,
    height: 166,
    location: '成都高新区',
    time: '1天前',
  },
  // 更多用户数据...
])

// 互换成功  传递的数据
const successList = ref<User[]>([
  {
    avatar: '../../../static/images/car.png',
    icon: '../../../static/message/男.png',
    name: '白天睡不醒',
    age: 26,
    height: 180,
    location: '成都郫都区',
    time: '16小时前',
  },

  // 更多用户数据...
])
// 收到请求 传入的数据
const receiveList = ref<User[]>([
  {
    avatar: '../../../static/images/car.png',
    icon: '../../../static/message/男.png',
    name: '白天睡不醒',
    age: 26,
    height: 180,
    location: '成都郫都区',
    time: '16小时前',
  },
  {
    avatar: '../../../static/images/car.png',
    icon: '../../../static/message/男.png',
    name: '白天睡不醒',
    age: 26,
    height: 180,
    location: '成都郫都区',
    time: '16小时前',
  },
  {
    avatar: '../../../static/images/car.png',
    icon: '../../../static/message/男.png',
    name: '白天睡不醒',
    age: 26,
    height: 180,
    location: '成都郫都区',
    time: '16小时前',
  },

  // 更多用户数据...
])

// 允许和忽略的事件
const handleAllow = (user: User) => {
  console.log('允许', user)
}

const handleIgnore = (user: User) => {
  console.log('忽略', user)
}
</script>

<style lang="scss" scoped></style>
